﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Chèn ảnh vào bài viết</title>
	<link href="/Scripts/colorpicker/web.css" type="text/css" rel="stylesheet">

	<script type="text/javascript" language="javascript" src="/scripts/library.js"></script>

	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<style type="text/css">
	a { text-decoration:none;}
	body {font-family:tahoma; font-size:11px; color:#303030;}
	input{border:solid 1px #999999; background-color:#e0e0e0; margin-right:2px;}</style>

	<script type="text/javascript">
	function PopupWindow(controlId)
	{
		document.getElementById("hidId").value = controlId;
		
		window.open('/Scripts/colorpicker/default.html' ,'filepicker','location=0,status=0,scrollbars=0,width=450,height=350');
	}
	function GetControlByHiddenField()
	{
		var hidId = document.getElementById("hidId");
		return document.getElementById(hidId.value)
	}
	function FillColorToTextBox(strColor)
	{
		var strControlId = document.getElementById("hidId").value;
		document.getElementById(strControlId).value = strColor;
	}
	</script>

</head>
<body>
	<table rules="rows" style="height: 500px; border: solid 2px #d0d0d0;" cellpadding="2">
		<tr>
			<td>
				Nguồn ảnh</td>
			<td colspan="4">
				<input id="imgURL" type="text" style="width: 400px;" />
			</td>
			<td>
				<img src="/images/icons/folder.gif" onclick="chooseFile('avatar')" style="cursor: pointer;" />
			</td>
		</tr>
		<tr>
			<td>
				Độ rộng ảnh</td>
			<td>
				<input id="imgWidth" type="text" style="width: 50px;" />px
			</td>
			<td>
				Màu nền</td>
			<td>
				<input id="txtBackgroundColor" type="text" value="" style="width: 50px;" /><a onclick="PopupWindow('txtBackgroundColor'); return false;"
					href="#">
					<img id="pickerTitleColor" src="/Images/vote/bgcolor.gif" width="25" align="absMiddle"
						border="0">
				</a>
			</td>
			<td>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td>
				Đường viền</td>
			<td>
				<select id="cboBorderWidth">
					<option>0px</option>
					<option>1px</option>
					<option>2px</option>
					<option>3px</option>
					<option>4px</option>
					<option>5px</option>
				</select>
			</td>
			<td>
				Màu</td>
			<td>
				<input id="txtBorderColor" type="text" value="" style="width: 50px;" /><a onclick="PopupWindow('txtBorderColor'); return false;"
					href="#">
					<img id="Img1" src="/Images/vote/bgcolor.gif" width="25" align="absMiddle" border="0">
				</a>
			</td>
			<td>
				Lề cách ảnh
				<select id="cboPadding">
					<option>0px</option>
					<option>1px</option>
					<option>2px</option>
					<option>3px</option>
					<option>4px</option>
					<option>5px</option>
				</select>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td>
				Vị trí</td>
			<td>
				<select id="cboFloat">
					<option value="center">Giữa</option>
					<option value="left">Trái</option>
					<option value="right">Phải</option>
				</select>
			</td>
			<td>
				Chữ cách lề</td>
			<td>
				<select id="cboMargin">
					<option>0px</option>
					<option>1px</option>
					<option>2px</option>
					<option>3px</option>
					<option>4px</option>
					<option selected="selected">5px</option>
					<option>6px</option>
					<option>7px</option>
					<option>8px</option>
					<option>9px</option>
					<option>10px</option>
				</select>
			</td>
			<td>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td colspan="6" align="center">
				<div style="height: 360px; width: 500px; overflow: auto;" id="imgPreview">
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="6" align="right">
				<input id="Button1" onclick="Cancel(); return false;" type="button" value="Hủy bỏ" />
				<input id="Button3" onclick="Preview(); return false;" type="button" value="Xem trước" />
				<input id="Button2" onclick="Insert(); return false;" type="button" value="OK" />
			</td>
		</tr>
	</table>
	<input id="hidId" type="hidden" />
<input id="fl" type="hidden" />
	<script type="text/javascript">

function Insert()
{
	Preview()
	if (document.all)
	{
		var obj=window.opener.oUtil.obj;
		obj.insertHTML(document.getElementById('imgPreview').innerHTML);
	}
	else
	{
		var oEditor=window.opener.oUtil.oEditor;
		var oSel=oEditor.getSelection();
		var oElement = window.opener.getSelectedElement(oSel);
		if (oElement.nodeName.toLowerCase() == 'img')
		{
			var img = document.getElementById('imgPreview').getElementsByTagName('img')[0];
			oElement.src = img.src;
			oElement.style.cssFloat = img.cssFloat;
			oElement.setAttribute('align',img.getAttribute('align'));
			oElement.style.border = 'solid ' + img.style.borderWidth + ' ' + img.style.borderColor;
			oElement.style.margin = img.style.margin;
			oElement.style.padding = img.style.padding;
			oElement.style.width = img.style.width;
		}
		else
		{
			var obj=window.opener.oUtil.obj;
			obj.insertHTML(document.getElementById('imgPreview').innerHTML);
		}
	}
	window.close();
}
function Preview()
{
	var isClear = false;
	var style = '', e;
	
	e = document.getElementById('txtBackgroundColor');
	if (e.value != '') style += 'background-color: ' + e.value + ';';
	
	e = document.getElementById('cboBorderWidth');
	if (e.selectedIndex > 0) style += 'border-style:solid; border-width: ' + e.options[e.selectedIndex].text + ';';
	
	e = document.getElementById('txtBorderColor');
	if (e.value != '') style += 'border-color: ' + e.value + ';';
	
	e = document.getElementById('cboPadding');
	if (e.selectedIndex > 0) style += 'padding: ' + e.options[e.selectedIndex].text + ';';
	
	e = document.getElementById('cboMargin');
	if (e.selectedIndex > 0) style += 'margin: ' + e.options[e.selectedIndex].text + ';';
	
	e = document.getElementById('cboFloat');
	
	var width = document.getElementById('imgWidth').value;
	var sHTML = '<img _fl="' + document.getElementById('fl').value + '" align="' + e.options[e.selectedIndex].value + '" style="' + style + '" src="' + document.getElementById('imgURL').value + '" ' + (width==''?'':' width="' + width + '" ') + ' />';
	
	if (e.selectedIndex == 0) sHTML = '<div>' + sHTML + '</div>';
	
	document.getElementById('imgPreview').innerHTML = sHTML;	
}
function Cancel()
{
	window.close();
}


	</script>

	<script type="text/javascript">
	function chooseFile(type)
	{
		var fl = document.getElementById('fl').value;
		openpreview('/GUI/EditoralOffice/MainOffce/FileManager/default.aspx?function=avatar_loadValue&mode=single&share=share&i=' + encodeURIComponent(document.getElementById('imgURL').value)  + (fl == '' ? '' : '&fl=' + encodeURIComponent(fl)), 900, 700);
	}
	function avatar_loadValue(arrImage)
	{
		if (arrImage.length > 0)
		{
			document.getElementById('imgURL').value = arrImage[0];
			document.getElementById('imgPreview').innerHTML = '<img onload="getWidth(this)" src="' + arrImage[0] + '" />';
		}
	}
	function getWidth(img)
	{
		document.getElementById('imgWidth').value = img.offsetWidth;
	}
	
	window.onload = function()
	{
		var oEditor=window.opener.oUtil.oEditor;
		var oSel=null;
		var oElement=null;
		
		if (document.all)
		{
			oSel = oEditor.document.selection.createRange();
			if (oSel.parentElement)	oElement = oSel.parentElement();
			else oElement=oSel.item(0);
		}
		else
		{
			oSel=oEditor.getSelection();
			oElement = window.opener.getSelectedElement(oSel);
		}
		
		if (oElement.nodeName.toLowerCase() == 'img')
		{
			document.getElementById('imgURL').value = oElement.src;
			document.getElementById('imgWidth').value = oElement.offsetWidth;
			
			document.getElementById('txtBackgroundColor').value = oElement.style.backgroundColor;
			document.getElementById('txtBorderColor').value = oElement.style.borderColor;
			setValueDropdownlist(document.getElementById('cboBorderWidth'), oElement.style.borderWidth);
			setValueDropdownlist(document.getElementById('cboPadding'), oElement.style.padding);
			setValueDropdownlist(document.getElementById('cboMargin'), oElement.style.margin);
			setValueDropdownlist(document.getElementById('cboFloat'), oElement.getAttribute('align'));
			document.getElementById('fl').value = oElement.getAttribute('_fl');
			Preview();
		}
	}
	
	</script>

</body>
</html>
